import { Button, Table, Divider, Space, message, Tag, } from 'antd'
import React, { useEffect, useState } from 'react'
import '../test/testAll.scss'
import CollectionCreateTest from '../../component/CreatTestComponent'
import { http } from '../../utils'

const columns = [
  {
    title: '题目编号',
    dataIndex: 'id',
    width: 50,
  },
  {
    title: '难易度',
    dataIndex: 'complexity_name',
    width: 30,
    filters: [
      {
        text: '简单',
        value: '简单',
      },
      {
        text: '入门',
        value: '入门',
      }, {
        text: '中等',
        value: '中等',
      }, {
        text: '进阶',
        value: '进阶',
      }, {
        text: '困难',
        value: '困难',
      },
    ],
    onFilter: (value, record) => record.complexity_name.indexOf(value) === 0,
    sortDirections: ['descend'],
    render: function (text, record, index) { //参数分别为当前行的值，当前行数据，行索引
      if (text === '简单') {
        return (<Tag color="#00f5d4">简单</Tag>)
      }
      if (text === '入门') {
        return (<Tag color="#b9fbc0">入门</Tag>)
      }
      if (text === '中等') {
        return (<Tag color="#e7c6ff">中等</Tag>)
      }
      if (text === '困难') {
        return (<Tag color="#f94144">困难</Tag>)
      }
      if (text === '进阶') {
        return (<Tag color="#ff5400">进阶</Tag>)
      }
    }
  },
  {
    title: '题目',
    dataIndex: ['question', 'question_stem'],
    width: 140,
  },
  {
    title: '答案',
    dataIndex: ['question', 'answer'],
    width: 180,
    render: function (text, record, index) { //参数分别为当前行的值，当前行数据，行索引
      if (record.type_name === '判断题') {

        return (<div>

          {record.question.answer === true ? '正确' : '错误'}
        </div>)
      } if (record.type_name === '单选题') {
        return (
          <div>
            {record.question.answer.includes(0) ? 'A' : ''}
            {record.question.answer.includes(1) ? 'B' : ''}
            {record.question.answer.includes(2) ? 'C' : ''}
            {record.question.answer.includes(3) ? 'D' : ''} </div>
        )
      } if (record.type_name === '多选题') {
        return (
          <div>
            {record.question.answer.includes(0) ? 'A' : ''}
            {record.question.answer.includes(1) ? 'B' : ''}
            {record.question.answer.includes(2) ? 'C' : ''}
            {record.question.answer.includes(3) ? 'D' : ''} </div>
        )
      }
      else {
        return (<div>{text}</div>)
      }
      // return (
      //   <div>{index}</div>
      // )
    }

  },
  {
    title: '分值',
    dataIndex: ['question', 'score'],
    width: 20,
    sorter: (a, b) => a.question.score - b.question.score,
  },
  {
    title: '所属学科',
    dataIndex: 'subject_name',
    width: 80,

  },
  {

    title: '题目类型',
    dataIndex: 'type_name',
    width: 80,
    filters: [
      {
        text: '判断题',
        value: '判断题',
      },
      {
        text: '填空题',
        value: '填空题',
      },
      {
        text: '单选题',
        value: '单选题',
      }, {
        text: '多选题',
        value: '多选题',
      }, {
        text: '简答题',
        value: '简答题',
      },
    ],
    onFilter: (value, record) => record.type_name.indexOf(value) === 0,
    sortDirections: ['descend'],
    width: 100,
    render: function (text, record, index) { //参数分别为当前行的值，当前行数据，行索引
      if (text === '判断题') {
        return (<Tag color="#bde0fe">判断题</Tag>)
      }
      if (text === '填空题') {
        return (<Tag color="#d6ccc2">填空题</Tag>)
      }
      if (text === '单选题') {
        return (<Tag color="#ffb703">单选题</Tag>)
      }
      if (text === '多选题') {
        return (<Tag color="#0096c7">多选题</Tag>)
      }
      if (text === '简答题') {
        return (<Tag color="#ff5400">简答题</Tag>)
      }
    }
  }, {
    title: '题目说明',
    dataIndex: 'description',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 100,
  },
]
const TestAdd = () => {
  const [open, setOpen] = useState(false)
  const onCreate = async (fieldsValue) => {
    const values = {
      ...fieldsValue,
      'start_time': fieldsValue['start_time'].format('YYYY-MM-DD HH:mm:ss'),
      'end_time': fieldsValue['end_time'].format('YYYY-MM-DD HH:mm:ss'),
    }

    console.log('Received values of form: ', values)

    try {
      await http.post('/base_server/api/v1/pub/paper/test/add', {
        description: values.description,
        start_time: values.start_time,
        end_time: values.end_time,
        name: values.testName,
        test_time: Number(values.testTime),
        question_list: selectedRowKeys,
        subject_id: values.subjectType,


      })
      setOpen(false)
    } catch (e) {
      message.error(e.response?.data?.message || '添加简答题失败')
    }

  }
  const [data, setData] = useState([{
    "id": 24,
    "question": {
      "answer": true,
      "description": null,
      "score": 5,
      "question_number": null,
      "question_stem": "1+1=2"
    },
    "description": "这可是小学数学题啊",
    "subject_name": "小学数学",
    "type_name": "判断题",
    "complexity_name": "困难",
    "create_by": 1,
    "create_time": "2022-09-04 10:56:10"
  }])
  const loadQuestionList = async () => {
    const res = await http.get(`/base_server/api/v1/pub/question/find_by_page${'?size='}${200}`)
    setData(res.data.records)
  }
  useEffect(() => {
    loadQuestionList()
  }, [])// eslint-disable-line
  //选中的数据
  const [selectQuestion, setSelectQuestion] = useState([])
  //
  //
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [loading, setLoading] = useState(false)
  const start = () => {
    setLoading(true)
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRowKeys([])
      setLoading(false)
    }, 1000)
  }
  const onSelectChange = (newSelectedRowKeys, record) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys)
    console.log(record)
    setSelectQuestion(record)
    console.log(selectQuestion)
    setSelectedRowKeys(newSelectedRowKeys)
  }
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  }
  const hasSelected = selectedRowKeys.length > 0
  //
  return (<div className="testadd-box">
    <Space>
      <Button type="primary" onClick={() => setOpen(true)}>
        新建试卷
      </Button>
      <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
        Reload
      </Button>
      <span
        style={{
          marginLeft: 8,
        }}
      >
        {hasSelected ? `您选择了 ${selectedRowKeys.length} 道题目` : ''}
      </span>
    </Space>
    <Divider />
    <Table rowSelection={rowSelection} columns={columns} dataSource={data} rowKey={(data) => data.id} />
    <CollectionCreateTest
      open={open}
      onCreate={onCreate}
      onCancel={() => {
        setOpen(false)
      }}
      selectQuestion={selectQuestion}
    >
    </CollectionCreateTest>
  </div>)
}
export default TestAdd